<template>
  <!-- 品控经理 审核选择是否需要总经理 -->
  <div class="courseBaseDialog">
    <el-dialog :visible="open" width="420px" @close="cancel()">
      <div class="el-message-box__header" slot="title">
        <div class="el-message-box__title">
          <span>通过确认</span>
        </div>
      </div>
      <div class="el-message-box__content">
        <div class="el-message-box__container">
          <div class="el-message-box__status el-icon-warning"></div>
          <div class="el-message-box__message">点击确认，通过审核。</div>
        </div>
        <div style="margin: 15px 0 0 6px">
          <el-checkbox v-model="need">{{
            type == 1 ? "是否需要副总经理复审" : "是否需要专业人员复审"
          }}</el-checkbox>
        </div>
        <div style="margin: 15px 0 0 6px" v-if="need && type == 2">
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="专业人员" prop="professionalId">
              <!-- 专业人员下拉框 -->
              <el-select
                v-model="form.professionalId"
                placeholder="请选择专业人员"
                clearable
                filterable
              >
                <el-option
                  v-for="item in list"
                  :key="item.userId"
                  :label="item.name"
                  :value="item.userId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <div class="el-message-box__btns">
        <el-button size="small" @click="cancel">取消</el-button>
        <el-button size="small" type="primary" @click="submitForm"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { reviewCourseTemporary } from "@/api/course/course";
import { mainAndManagerlist } from "@/api/schoolOrganization/student";
export default {
  props: {
    open: Boolean,
    // 1为总经理 2为专业人员
    type: Number,
    courseId: [Number, String],
  },
  data() {
    return {
      need: false,
      list: [],
      // 表单参数
      form: {
        professionalId: undefined,
      },
      // 表单校验
      rules: {
        professionalId: [
          { required: true, message: "专业人员不能为空", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    open(e) {
      if (e) {
        this.need = false;
        //如果是专业人员
        if (this.type == 2) {
          this.reset();
          this.getList();
        }
      }
    },
  },
  mounted() {},
  methods: {
    /* 获取人员列表 */
    getList() {
      mainAndManagerlist().then((response) => {
        this.list = response.data;
      });
    },
    async audit() {
      // 因为组件使用过于繁琐 所以将接口操作写在组件里
      const loading = this.$loading({
        lock: true,
        text: `正在审核中…`,
        spinner: "el-icon-loading",
        background: "rgba(255, 255, 255, 0.6)",
      });
      try {
        let data;
        // 如果是专业人员
        if (this.type == 2) {
          data = {
            professionalId: this.form.professionalId,
            approvalState: 1,
            id: this.courseId,
          };
        }
        // 如果是总经理
        else {
          data = {
            isDgmApproval: this.need ? 1 : 0,
            approvalState: 1,
            id: this.courseId,
          };
        }
        let res = await reviewCourseTemporary(data);
        if (res.code == 200) {
          this.$modal.msgSuccess("通过审核成功");
          this.$emit("update:open", false);
          this.$emit("refresh");
          this.$store.dispatch("tagsView/delView", this.$router.currentRoute);
          setTimeout(() => {
            this.$router.push({ path: "/course/course_temporary" });
          }, 100);
        }
      } finally {
        loading.close();
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$nextTick(() => {
        if (this.type == 2 && this.need) {
          this.$refs["form"].validate(async (valid) => {
            if (valid) {
              this.audit();
            }
          });
        } else {
          this.audit();
        }
      });
    },
    // 表单重置
    reset() {
      this.resetForm("form");
      this.form = {
        professionalId: undefined,
      };
    },
    cancel() {
      this.$emit("update:open", false);
      this.reset();
    },
  },
};
</script>
<style scoped lang="scss">
.courseBaseDialog {
  ::v-deep .el-dialog .el-dialog__header {
    border-bottom: none;
    padding: 0 !important;
  }
  ::v-deep .el-message-box__btns .el-button {
    margin-left: 10px;
  }
  ::v-deep .el-message-box__btns {
    padding-bottom: 10px;
  }
  ::v-deep .el-dialog .el-dialog__body {
    padding: 0px !important;
  }
}
</style>